<template>
<div class="product-add">
    <!--form表单-->
    <el-form
      size="small"
      ref="formRef"
      :model="form"
      label-width="250px"
      :rules="rules"
    >
      <!--公众号设置-->
      <div class="common-form">{{$t('appsetting.public_account_settings')}}</div>
      <el-form-item :label="$t('appsetting.login_mode')">
        <el-radio-group v-model="form.mpState">
          <el-radio :label="1">{{$t('appsetting.login_by_wechat')}}</el-radio>
          <el-radio :label="0">{{$t('appsetting.login_by_phone')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <template v-if="form.mpState">
        <el-form-item
          :label="$t('appsetting.public_appid')"
          prop="mpappId"
          :rules="form.mpState != 1 ? rules.target : [{  required: false}]"
        >
          <el-input v-model="form.mpappId" class="max-w460"></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('appsetting.public_appsecret')"
          prop="mpappSecret"
          :rules="form.mpState != 1 ? rules.target : [{  required: false}]"
        >
          <el-input v-model="form.mpappSecret" class="max-w460"></el-input>
        </el-form-item>

        <el-form-item :label="$t('appsetting.wechat_proxy_enable')">
          <el-radio-group v-model="form.enableMpOauth">
            <el-radio :label="true">{{$t('appsetting.yes')}}</el-radio>
            <el-radio :label="false">{{$t('appsetting.no')}}</el-radio>
          </el-radio-group>
          <div class="tips">{{$t('appsetting.wechat_proxy_note')}}</div>
        </el-form-item>
        <el-form-item
            :label="$t('appsetting.wechat_proxy_url')"
            prop="mpOauthUrl"
        >
          <el-input v-model="form.mpOauthUrl" class="max-w460"></el-input>
          <div class="tips">{{$t('appsetting.wechat_proxy_url_note')}}</div>
        </el-form-item>

      </template>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit">{{$t('appsetting.submit')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import AppSettingApi from "@/api/appsetting.js";
export default {
  data() {
    return {
      /*form表单数据*/
      form: {
        mpState: 0,
        enableMpOauth: false,
        mpOauthUrl: ''
      },
      rules: {
        mpappId: [{
          required: true,
          message: $t("appsetting.public_appid_required"),
          trigger: "blur"
        }],
        mpappSecret: [{
          required: true,
          message: $t("appsetting.public_appsecret"),
          trigger: "blur"
        }]
      }
    };
  },
  created() {
    this.getData();
    this.getMpLoginSetting();
  },
  methods: {
    /*获取数据*/
    getData() {
      let self = this;
      AppSettingApi.appmpDetail({}, true).then(res => {
        if (res.data != null) {
          self.form = Object.assign(self.form, res.data);
        }
      }).catch(error => {});
    },
    getMpLoginSetting() {
      let self = this;
      AppSettingApi.mpLoginSetting({}, true).then(res => {
        self.form.mpState = res.data.mpState;
        self.form.mpOauthUrl = res.data.mpOauthUrl;
        self.form.enableMpOauth = res.data.enableMpOauth;
      }).catch(error => {});
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      let params = this.form;
      this.$refs.formRef.validate(async valid => {
        if (valid) {
          AppSettingApi.editAppMp(params, true).then(data => {
            ElMessage({
              message: $t("appsetting.setup_success"),
              type: "success"
            });
            self.$router.push("/appsetting/appmp/index");
          }).catch(error => {});
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.tips {
  color: #ccc;
}
</style>

